import * as d3 from "d3";

function Paypaint(data,Status)
{
  // 筛选所需数据 // 如果是0则3个区如果是1则显示相近两个区
  data = data.filter(item =>{
    if(Status == 0)
      return Math.abs(item.typenum - Status) <= 3;
    else if(Status == 1 || Status == 16)
      return Math.abs(item.typenum - Status) <= 2;
    else
      return Math.abs(item.typenum - Status) <= 1;
  });// typenum : 0天津 1-16各区
  // console.log(data);
  // 数据转换
  data=data.map(d=>{return{
    year:parseInt(d.year),//年份
    sepalLength:parseFloat(d.investment),//投资
    sepalWidth:parseFloat(d.sales),//消费
    species:d.typename}//不同地区
  });
  // Specify the chart’s dimensions.
  const width = 380;
  const height = 340;
  const marginTop = 25;
  const marginRight = 20;
  const marginBottom = 50;
  const marginLeft = 40;
  // Create the positional scales.
  const x = d3.scaleLinear()
    .domain(d3.extent(data, d => d.sepalLength)).nice()
    .range([marginLeft+10, width - marginRight]);
  const y = d3.scaleLinear()
    .domain(d3.extent(data, d => d.sepalWidth)).nice()
    .range([height - marginBottom, 2*marginTop]);
  // Create the categorical scales.
  const color = d3.scaleOrdinal(data.map(d => d.species), d3.schemeCategory10);
  const shape = d3.scaleOrdinal(data.map(d => d.species), d3.symbolsFill.map(s => d3.symbol().type(s)()));

  // Create the SVG container.
  const svg = d3.select("#svgPay");
  svg.selectAll("*").remove();
  svg.attr("viewBox", [0, 0, width, height])
    .attr("width", width)
    .attr("height", height)
    .attr("style", "max-width: 100%; height: auto;");
  // Append the axes.
  svg.append("g")
      .attr("transform", `translate(0,${height - marginBottom})`)
      .call(d3.axisBottom(x).ticks(width / 80))
      .call(g => g.select(".domain").remove())
      .call(g => g.append("text")
          .attr("x", width)
          .attr("y", marginBottom - 4)
          .attr("fill", "currentColor")
          .attr("text-anchor", "end")
          .style("font-size", "14px") // 调整字体大小在这里
          .text("实际使用外资金额/万美元 →"));
  svg.append("g")
      .attr("transform", `translate(${marginLeft},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select(".domain").remove())
      .call(g => g.append("text")
          .attr("x", -marginLeft)
          .attr("y", 15)
          .attr("fill", "currentColor")
          .attr("text-anchor", "start")
          .style("font-size", "14px") // 调整字体大小在这里
          .text("↑ 社会消费品零售总额/亿元"));

  // Add a grid.
  svg.append("g")
      .attr("stroke", "currentColor")
      .attr("stroke-opacity", 0.1)
      .call(g => g.append("g")
        .selectAll("line")
        .data(x.ticks())
        .join("line")
          .attr("x1", d => 0.5 + x(d))
          .attr("x2", d => 0.5 + x(d))
          .attr("y1", 2*marginTop)
          .attr("y2", height - marginBottom))
      .call(g => g.append("g")
        .selectAll("line")
        .data(y.ticks())
        .join("line")
          .attr("y1", d => 0.5 + y(d))
          .attr("y2", d => 0.5 + y(d))
          .attr("x1", marginLeft)
          .attr("x2", width - marginRight));

  // Add the scatterplot symbols.
  svg.append("g")
      .attr("stroke-width", 1.5)
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
    .selectAll("path")
    .data(data)
    .join("path")
      .attr("transform", d => `translate(${x(d.sepalLength)},${y(d.sepalWidth)})`)
      .attr("fill", d => color(d.species))
      .attr("d", d => shape(d.species));

  // 创建一个组元素用于容纳图例
  const legendGroup = svg.append("g")
      .attr("class", "legend")
      .attr("transform", "translate(20, 30)");
  // 创建一个图例项，包括与数据点相同的形状和标签
  const legendItems = legendGroup.selectAll(".legend-item")
      .data(d3.group(data, d => d.species))
      .enter().append("g")
      .attr("class", "legend-item")
      .attr("transform", (d, i) => `translate(${120 + i * 80}, 0)`);
  // 添加与数据点相同的形状
  legendItems.append("path")
      .attr("transform", `translate(5, 5)`) // 调整形状的位置
      .attr("d", d => shape(d[0])) // 使用与数据点相同的形状
      .attr("fill", d => color(d[0]));
  // 添加文本表示标签
  legendItems.append("text")
      .attr("x", 15) // 调整文本的位置
      .attr("y", 10)
      .attr("dy", "0.3em")
      .attr("font-size", "14px")
      .attr("font-family", "Arial, sans-serif")
      .attr("text-anchor", "start")
      .text(d => {//console.log(d);
        return `${d[0]}`;});

  return svg.node();
}

export default Paypaint;